<template>
  <div class="kuaiZhaoDetails">
    <!-- 引入头部组件 并修改内容 -->
    <div class="header_box">
      <header1View>
        <template v-slot:left>
          <div class="title_left">
            <van-icon name="arrow-left"
                      class="icon"
                      @click="back" />
          </div>
        </template>
        <template v-slot:center>
          <div class="title_center">
            交易快照
          </div>
        </template>
      </header1View>
    </div>
    <div class="details">
      <!-- 商品大图 -->
      <div class="pic">
        <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E5%BF%AB%E7%85%A7%E8%AF%A6%E6%83%85/u4968.png"
             alt="">
      </div>
      <div class="content">
        <!-- 商品标题价格等 -->
        <div class="title_price">
          <div class="title">
            香辣鸡排汉堡双人套餐
          </div>
          <div class="serve">
            <span id="redColor">服务</span>
            <span>随时退 过期退 推荐自提</span>
          </div>
          <div class="sales">
            <span id="redColor">限购</span>
            <span>每单限购10件</span>
          </div>
          <div class="price">
            <div>
              <span class="p_price1">125P</span>
              <span class="p_price2">130P</span>
              <span id="discount">9.6折</span>
            </div>
            <div class="saleNum">已售5.3万份</div>
          </div>
        </div>
        <!-- 店铺信息 -->
        <div class="shop">
          <span>华莱士全鸡汉堡</span>
          <span class="orange_words">4.5分</span>
          <span>人均240P</span>
          <span>2.2km</span>
        </div>
        <!-- 商品内容 -->
        <div class="orderInfo">
          <div class="title">商品内容</div>
          <!-- 主菜 -->
          <div class="title2">主菜 4选2(不可重复选)</div>
          <div class="orderF">
            <div class="order_left">
              <ul>
                <li>火焰牛排
                  <span class="greyColor">(1份)</span>
                </li>
                <li>香辣鸡肉披萨
                  <span class="greyColor">(1份)</span>
                </li>
                <li>西冷牛排
                  <span class="greyColor">(1份)</span>

                </li>
                <li>菲力牛排
                  <span class="greyColor">(1份)</span>

                </li>
              </ul>
            </div>
            <div class="order_right">
              <div>280</div>
              <div>240</div>
              <div>285</div>
              <div>280</div>
            </div>
          </div>
          <!-- 小吃 -->
          <div class="title2">小吃 2选1(不可重复选)</div>
          <div class="orderF">
            <div class="order_left2">
              <ul>
                <li>香辣藤椒鸡块
                  <span class="greyColor">(1份)</span>
                </li>
                <li>美式粗薯条
                  <span class="greyColor">(1份)</span>
                </li>
              </ul>
            </div>
            <div class="order_right2">
              <div>150</div>
              <div>130</div>
            </div>
          </div>
          <!-- 饮品 -->
          <div class="title2">主饮品</div>
          <div class="orderF">
            <div class="order_left2">
              <ul>
                <li>金桔爆柠
                  <span class="greyColor">(1份)</span>
                </li>
                <li>嫣红鲜奶茶
                  <span class="greyColor">(1份)</span>
                </li>
              </ul>
            </div>
            <div class="order_right2">
              <div>125</div>
              <div>125</div>
            </div>
          </div>
          <div class="clearF">
            <div class="total">总价值：840</div>
          </div>
        </div>
        <!-- 商品规则 -->
        <div class="detailsInfo">
          <div class="title">商品规则</div>
          <!-- 活动时间 -->
          <div class="title2">活动时间</div>
          <div class="greyColor">2022-07-08至2022-12-31，商品可能因为库存不足等原因提前下架</div>
          <!-- 有效期 -->
          <div class="title2">有效期</div>
          <ul>
            <li class="greyColor">购买后15天内有效</li>
          </ul>
          <!-- 可用时间 -->
          <div class="title2">可用时间</div>
          <ul>
            <li class="greyColor">周一至周五（全天）</li>
          </ul>
          <!-- 限购数量 -->
          <div class="title2">限购数量</div>
          <ul>
            <li class="greyColor">每人每单限购10件</li>
          </ul>
          <!-- 使用规则 -->
          <div class="title2">使用规则</div>
          <ul>
            <li class="greyColor">该商品不可与商家其他优惠同享</li>
            <li class="greyColor">酒水饮料等问题，请致电商家咨询，以商家反馈为准</li>
            <li class="greyColor">如部分菜品因时令或其他不可抗因素导致无法提供，
              商家会用等价菜品替换，具体事宜请与商家协商</li>
            <li class="greyColor">仅限到店堂食，不提供自提外带，不提供送餐</li>
          </ul>
          <!-- 商家服务 -->
          <div class="title2">商家服务</div>
          <ul>
            <li class="greyColor">免预约</li>
            <li class="greyColor">包间可用</li>
            <li class="greyColor">免费WIFI</li>
            <li class="greyColor">免费停车</li>
            <li class="greyColor">推荐自提</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import header1View from '../../components/OrdersComponents/header1View.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    header1View,
  },
  methods: {
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.header_box {
  position: fixed;
}
.details {
  padding-top: 20px;
}
.kuaiZhaoDetails {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 5px;
}
.title_center {
  width: 100px;
  margin: 0 auto;
  align-items: center;
}
.icon {
  position: absolute;
  left: 10px;
  top: 50%;
  margin-top: -8px;
}
.pic img {
  width: 100%;
}
.content {
  margin: 15px;
  font-size: 14px;
}
.title_price,
.orderInfo,
.detailsInfo {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
}
.title_price span,
.saleNum {
  margin-top: 10px;
  font-size: 12px;
  display: inline-block;
  color: #000;
}
.title {
  font-size: 16px;
  font-weight: 600;
}
.shop {
  padding: 15px;
  background-color: #f9f9f9;
}
#discount {
  font-size: 12px;
  color: #fc6d52;
  border: #fc6d52 1px solid;
  border-radius: 4px;
  padding: 2px;
}
.p_price1 {
  font-size: 20px;
  color: #fc6d52 !important;
  font-weight: 900px;
}
.p_price2 {
  margin: 0px 10px;
  text-decoration: line-through;
}
.shop span {
  margin-right: 5px;
}
.orange_words {
  color: #fc6d52;
}

#redColor {
  color: red;
  font-size: 12px;
  margin-right: 10px;
}
.greyColor {
  color: #888787;
  font-size: 12px;
  padding: 5px;
}
.price {
  display: flex;
  justify-content: space-between;
}
.orderF {
  display: flex;
  justify-content: space-between;
}
.title2 {
  margin-top: 10px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  font-weight: 600;
}
.order_left,
.order_right {
  height: 120px;
  line-height: 30px;
  font-size: 12px;
}
.order_left2,
.order_right2 {
  height: 60px;
  line-height: 30px;
  font-size: 12px;
}
li::before {
  content: "\2022  ";
  display: inline-block;
  font-size: 12px;
  margin-right: 5px;
}
.clearF {
  padding-top: 10px;
  height: 30px;
  line-height: 30px;
  border-top: 1px solid rgb(205, 203, 203);
}
.total {
  float: right;
}
</style>